import { UserProfilesAPI } from '@/request/api';

export default {
    // 1设置命名空间
    namespaced:true,
    // 共享数据
    state: {
        userInfo:{
        // 昵称
        nickName:'',
        // 积分 鸡腿数
        coin:0,
        // 头像
        headImg:require('../../assets/img/userImg.f8bbec5e.png')
        },
        // 购物车数量
        cartTotal: 0,
        
    },
    mutations:{
        // 修改是否显示登录模态框状态
        changeUseInfo(state,payload) {
            // console.log("修改vuex中用户信息",payload);
            state.userInfo = payload.userInfo
            state.cartTotal = payload.cartTotal
        },
        // 初始化
        initUserInfo(state) {
            // console.log("初始化信息了");
            state.userInfo= {
                // 昵称
                nickName:'',
                // 积分 鸡腿数
                coin:0,
                // 头像
                headImg:require('../../assets/img/userImg.f8bbec5e.png')
            }
            // 购物车数量
            state.cartTotal = 0
        }
    },
    actions:{
        async asyncChangeUserInfo(context) {
            // 1 请求用户信息
            let user = await UserProfilesAPI();
            console.log("user:",user.data);
            // 2 调用mutations 传递信息 更新用户信息
            context.commit("changeUseInfo",user.data)
        }
    }
}
/* 
    1 刷新之后vuex数据还原了,回到了默认状态
    原因 vuex缺点 刷新后,会还原默认状态.数据没有持久化
    解决
    1 重新请求数据库数据
    2 存储到本地 localStorage

    分析 刷新--- topbar.vue ,created(),else 代码 更新用户状态处,已登录重新请求用户信息.
    
    2 登录成功后,手动删除token,切换导航时,登录状态变成未登录但是用户信息没有还原
      更新登录状态:通过组件重载, APP.vue中watch,会让topbar.vue重新执行 created
      解决 更新登录状态后,同时更新用户信息
      如果未登录,应该将vuex中数据还原
      
    2.1在 vuex 中增加方法 初始化state 数据 initUserInfo
    2.2更新登录状态后,同时更新用户信息
       未登录时,调用initUserInfo  

    3手机扫码后,没有更新用户信息
    代码会渠道Topbar.vue 中的crerted代码内
    解决:code==0时,调用actions 方法更新信息
*/